<template>
  <view class="content">
    <view class="u-tabs_line">
      <view class="u-tabs_wrapper">
        <u-tabs
          class="tab"
          :list="nav_list"
          :is-scroll="false"
          :current="current"
          @change="tabsChange"
          height="96"
          swiperWidth="450"
          bar-height="4"
          bar-width="30"
          bg-color="transparent"
          font-size="32"
          active-color="#1FE7E7"
          inactive-color="#F1F1F1"
          :bar-style="barStyle"
        ></u-tabs>
      </view>
    </view>

    <view class="wrapper" v-for="(item, index) in orderList" :key="index">
      <view class="record" @click="toDetail(item.order_no)">
        <view class="record_num">x{{ item.num }}</view>

        <image
          v-if="item.product_snap"
          class="record_image"
          :src="item.product_snap.cover"
        ></image>

        <view class="record_content" v-if="item.product_snap">
          <view class="record_content_title">{{ item.product_snap.name }}</view>
          <view class="record_content_second">
            <image
              class="record_content_avatar"
              :src="item.product_snap.creator_avatar"
            ></image>
            <view class="record_content_username">{{
              item.product_snap.creator_name
            }}</view>
          </view>
          <view class="record_content_third">
            <view class="record_content_price"
              >¥ {{ item.product_snap.price }}</view
            >

            <view class="record_content_status" v-if="item.pay_status == 1"
              >待付款</view
            >
            <view class="record_content_status" v-else-if="item.pay_status == 2"
              >交易成功</view
            >
            <view class="record_content_status" v-else-if="item.pay_status == 4"
              >已取消</view
            >
          </view>
        </view>
      </view>

      <view class="unpaid" v-if="item.pay_status == 1">
        <view class="unpaid_top">
          <u-count-down
            :timestamp="item.oldTime"
            separator="colon"
            separator-color="#1FE7E7"
            separator-size="28"
            font-size="28"
            @end="end()"
            color="#1FE7E7"
            :show-border="false"
            bg-color="transparent"
          ></u-count-down>
          <view class="unpaid_left">后关闭</view>
        </view>
        <!-- <view class="unpaid_left">{{ item.expire_at }} 后关闭</view> -->
        <view style="display: flex">
          <!-- <view class="unpaid_right" @click="cancelorder(item.order_no)" style="margin:0 10rpx;"
          >取消订单</view
        > -->
          <view class="unpaid_right" @click="handlePay(item.order_no)"
            >去支付</view
          >
          <!-- <view class="unpaid_right" @click="pay(item.order_no)">去支付</view> -->
        </view>
      </view>
    </view>

    <empty :show.sync="orderList.length == 0 && is_done"></empty>
    <u-modal
      v-model="cancelorderstate"
      :content="content"
      @confirm="confirm"
      @cancel="cancel"
      :show-cancel-button="true"
    ></u-modal>
  </view>
</template>

<script>
import api from "@/api/api.js";
import tip from "@/utils/tip.js";
import { isLogin } from "@/utils/auth.js";
import empty from "@/components/empty/empty";
import { getTimeleft } from "@/utils/timeleft.js";
import moment from "moment";
export default {
  components: {
    empty,
  },
  data() {
    return {
      cancelorder_no: "",
      cancelorderstate: false,
      content: "请确认是否取消订单",
      widHeigh: 0,
      nav_list: [
        { name: "全部" },
        { name: "待付款" },
        { name: "已付款" },
        { name: "已取消" },
      ],
      current: 0,
      barStyle: {
        background: "#1FE7E7",
      },

      orderList: [],
      pay_status: "",
      limit: 10,
      is_done: false,
      IPaddress: "",
      oldTime: "",
    };
  },
  onLoad() {
    let windowElement = uni.getSystemInfoSync();
    this.widHeigh = windowElement.windowHeight;

    this.IPaddress = uni.getStorageSync("ipAddress");
  },
  onShow() {
    this.getUserOrders(true);
  },
  onReachBottom() {
    this.page++;
    this.getUserOrders(false);
  },
  // onUnload(){
  // 		clearInterval(this.time)
  // },

  methods: {
    cancelorder(val) {
      this.cancelorderstate = true;
      this.cancelorder_no = val;
    },
    async confirm() {
      let res = await api.cancelOrder({
        query: {
          order_no: this.cancelorder_no,
        },
        method: "post",
      });
      if (res.code == 0) {
        this.getUserOrders(true);
      }
    },
    cancel() {
      this.cancelorderstate = false;
    },
    end() {
      this.getUserOrders(true);
    },
    tabsChange(index) {
      this.current = index;
      if (index == 0) {
        this.pay_status = "";
      } else if (index == 1) {
        this.pay_status = 1;
      } else if (index == 2) {
        this.pay_status = 2;
      } else if (index == 3) {
        this.pay_status = 4;
      }
      this.getUserOrders(true);
    },

    async getUserOrders(refresh) {
      this.is_done = false;
      if (refresh) {
        this.page = 1;
      }
      let res = await api.userOrders({
        method: "get",
        query: {
          page: this.page,
          limit: this.limit,
          pay_status: this.pay_status, //1.待支付 2.支付成功 3.支付失败 4.订单取消
        },
      });
      if (res.code === 0) {
        this.is_done = true;
        let resAfter = res.data.map((x) => ({
          id: x.id,
          order_no: x.order_no,
          pay_order_no: x.pay_order_no,
          product_snap: JSON.parse(x.product_snap),
          pay_status: x.pay_status,
          pay_money: x.pay_money,
          expire_at: x.expire_at,
          created_at: x.created_at,
          num: x.num,
        }));

        if (refresh) {
          this.orderList = resAfter;
        } else {
          this.orderList = this.orderList.concat(resAfter);
        }

        this.orderList.forEach((el) => {
          if (el.pay_status == 1) {
            let newTime = moment();
            el.oldTime = getTimeleft(el.expire_at, newTime).duration;
          }
        });
      } else {
        tip.defaults(res.msg);
      }
    },

    handlePay(order_no) {
      uni.navigateTo({
        url: `../../pages/order_detail/order_detail?order_no=${order_no}`,
      });
      return;
      this.$u.debounce(this.pay(order_no), 1000, true);
    },

    // 支付
    pay(order_no) {
      console.log(order_no, "order_no");
      return async () => {
        const res = await api.pay({
          method: "post",
          query: {
            pay_type: 5,
            order_no: order_no,
            // client_ip:this.IPaddress
          },
        });
        if (res.code == 0) {
          uni.navigateTo({
            url: `/pages/webview/webview?url=${res.data}`,
          });
          // var params = res.data;
          // // App上生效
          // let orderInfo = {
          //   appid: params.appid, //对应的appid
          //   noncestr: params.noncestr,
          //   package: params.package,
          //   partnerid: params.partnerid,
          //   prepayid: params.prepayid,
          //   timestamp: params.timestamp,
          //   sign: params.sign, //二次签名
          // };
          // uni.requestPayment({
          //   provider: "wxpay", // wxpay、alipay
          //   orderInfo: JSON.stringify(orderInfo), //微信、支付宝订单数据
          //   success: function (res) {
          //     tip.success("支付成功");
          //     console.log("res", res);
          //   },
          //   fail: function (err) {
          //     tip.defaults("支付失败");
          //     console.log("err", err);
          //   },
          // });
        } else {
          this.getUserOrders(true);
          tip.defaults(res.msg);
        }
      };
    },

    toDetail(order_no) {
      uni.navigateTo({
        url: `../../pages/order_detail/order_detail?order_no=${order_no}`,
      });
    },

    onreachBottom() {
      console.log("触发 onreachBottom");
      this.page++;
      this.$u.throttle(this.getUserOrders(), 1000, true);
    },
  },
};
</script>

<style lang="scss" scoped>
@import "../../style/yuanchuang.scss";
.content {
  font-family: PingFangSC-Regular, PingFang SC;
  padding: 30rpx 30rpx 30rpx 30rpx;
  background: $bg-color1;

  min-height: calc(100vh - 44px);
}
.u-tabs_line {
  display: flex;
  position: relative;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  .u-tabs_wrapper {
    width: 70%;
  }
}
.wrapper {
  margin-top: 30rpx;
}
.record {
  position: relative;
  display: flex;
  align-items: center;
  width: 690rpx;
  height: 242rpx;
  border-radius: 24rpx;

  background-image: url(../../static/transaction_record_bg.png);
  background-repeat: no-repeat;
  background-size: 100% 242rpx;
  &_num {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 99;
    width: 66rpx;
    height: 38rpx;
    background: linear-gradient(90deg, #1fe6e6 0%, #df7fd6 100%);
    border-radius: 24rpx 0rpx 24rpx 0rpx;
    text-align: center;
    font-size: 24rpx;
    font-weight: 400;
    color: #ffffff;
    line-height: 38rpx;
  }
  &_image {
    width: 242rpx;
    height: 242rpx;
    border-radius: 24rpx;
  }
  &_content {
    flex: 1;
    padding: 30rpx;
    &_title {
      height: 44rpx;
      font-size: 32rpx;
      font-weight: 500;
      color: #ffffff;
      line-height: 44rpx;
      overflow: hidden;
      -webkit-line-clamp: 1;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-box-orient: vertical;
    }
    &_second {
      margin-top: 20rpx;
      display: flex;
      align-items: center;
    }
    &_avatar {
      width: 36rpx;
      height: 36rpx;
      border-radius: 50%;
    }
    &_username {
      margin-left: 8rpx;
      height: 36rpx;
      font-size: 26rpx;
      font-weight: 500;
      color: #ffffff;
      line-height: 36rpx;

      width: 360rpx;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    &_third {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 40rpx;
    }
    &_price {
      height: 42rpx;
      font-size: 36rpx;
      font-family: SFPro-Bold, SFPro;
      font-weight: bold;
      color: #ffffff;
      line-height: 42rpx;
    }
    &_status {
      height: 34rpx;
      font-size: 24rpx;
      font-weight: 400;
      color: $text-color3;
      line-height: 34rpx;
    }
  }
}
.unpaid {
  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: 0 16rpx 0 30rpx;
  margin-top: 10rpx;
  width: 690rpx;
  height: 100rpx;
  background: $bg-color3;
  border-radius: 16rpx;
  .unpaid_top {
    display: flex;
    align-items: center;
  }
  &_left {
    margin-left: 6rpx;
    height: 40rpx;
    font-size: 28rpx;
    font-weight: 400;
    color: $text-color3;
    // line-height: 40rpx;
  }
  &_right {
    width: 144rpx;
    height: 68rpx;
    color: $text-color4;
    // background: $button;
    // background-repeat: no-repeat;
    // background-size: 100%;
    border-radius: 34rpx;
    background: linear-gradient(90deg, #1fe6e6 0%, #df7fd6 100%);

    font-size: 28rpx;
    font-weight: 400;
    line-height: 68rpx;
    text-align: center;
  }
}
</style>